<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .message-box {
            padding: 10px 20px;
            background: #4fc08d;
            border: 1px solid #42b983;
        }
        .message-box-close {
            float: right;
        }
    </style>
</head>
<body>
<!-- 宿主文件 -->
<div id="app">
<!--    弹窗组件 -->
<!--    $event 就是子组件传递过来的参数-->
<!--    <message-->
<!--            :show="show"-->
<!--            @close="show=$event"-->
<!--    >-->
<!--        新增课程成功！-->
<!--    </message>-->
<!--新的修饰符 sync-->
    <message
            :show.sync="show"
    >
        <template v-slot:scopeSlot="slotProps">
<!--            作用域插槽的内容！ -->
            <strong>
                {{slotProps.title}}
            </strong>
        </template>
<!--        命名为title的插槽的内容！ -->
        <template v-slot:title>
            <h1>lvhanghmm</h1>
        </template>
<!--        默认的插槽内容！ -->
        <template>
            新增课程成功！
        </template>
    </message>


    <h2 :title="title">
        <!-- 插值表达式！ -->
        {{title}}
    </h2>
    <!--    新增课程 -->
    <course-add v-model="course" @add-course="addCourse"></course-add>
    <!-- $event 表示传递出来的参数 -->
    <!--    <course-add :value="course" @input="course=$event" @add-course="addCourse"></course-add>-->

    <!--    列表组件 -->
    <course-list :courses="courses"></course-list>

    <!--    商品总数-->
    <p>
        <!--        表达式-->
        <!--        课程总数：{{courses.length + ' 门'}}-->
        <!--        使用计算属性的功能对上面的代码进行改进！-->
        <!--        课程总数：{{total}}-->

        <!--        也可以用监听器实现上面的功能！ -->
        课程总数：{{totalCount}}
    </p>
</div>

<script src="../js/vue.js"></script>
<script>
    // 弹窗组件
    Vue.component('message', {
        props: ['show'],
        template:
                `
<!--                  @click="$emit('close', false)"-->
                   <div class="message-box" v-if="show">
                   <!-- 作用域插槽-->
                <slot name="scopeSlot" title="来自子组件的内容 也就是【作用域插槽中的内容】"></slot>

                    <!-- 具名插槽 -->
                   <slot name="title">默认标题</slot>
                   <!-- 通过slot获取传入内容 -->
                    <slot></slot>
                    <span
                     class="message-box-close"
                     @click="$emit('update:show', false)"
                     style="cursor: pointer"
                     >X</span>
                   </div>
                `
    })

    // 课程新增组件
    Vue.component('course-add', {
        props: ['value'],
        template:
            `
        <div>
<!-- 表单输入绑定 -->
            <input
            :value="value"
            @keydown.enter="addCourse"
            @input="onInput"
            />
                <!-- 事件处理 -->
            <button v-on:click="addCourse">新增课程</button>
            </div>
            `,
            methods: {
            addCourse() {
            // 发送自定义事件通知父组件
            // 注意事件名称定义时不要有大写字母出现
            this.$emit('add-course')
            },
            onInput(e) {
            this.$emit('input', e.target.value)
            }
            },
            })

            // 课程列表组件
            Vue.component('course-list', {
            data() {
            return {
            selectedCourse: '',
            }
            },
            props: {
            courses: {
            type: Array,
            default: []
            }
            },
            template: `
            <div>
                <!--    条件渲染-->
            <p v-if="courses.length == 0">没有任何课程信息！</p>

            <div class="course-list" v-else>
            <div
            :style="{backgroundColor: selectedCourse === c ? '#ddd' : 'transparent'}"
            @click="selectedCourse = c"
            v-for="c
            in courses"
            :key="c">
            <div>
            {{ c }}
            </div>
            </div>
            </div>
            </div>
            `
            })


            // 模拟异步数据调用
            function getCourses() {
            return new Promise(resolve => {
            setTimeout(() => {
            resolve(['web全栈', 'web高级'])
            }, 2000)
            })
            }

            // 1、创建Vue的实例
            const app = new Vue({
            el: "#app",
            data() {
            return {
            title: '开课吧，购物车!',
            course: '',
            courses: [],
            totalCount: 0,
            show: false
            }
            },
            methods: {
            addCourse() {
            // 1、添加course到数组
            this.courses.push(this.course)
            this.course = ''

            // 显示提示信息
            this.show = true
            }
            },
            // 我们在写程序中用的比较多的两个钩子就是created and mounted
            async created() {
            // 进入这个生命周期函数：组件实例已创建，由于未挂载，dom不存在！
            const course = await getCourses()
            this.courses = course
            },
            mounted() { },
            computed: {
            total() {
            // 计算属性有缓存性：如果值没有发生变化，则页面不回重新渲染
            return this.courses.length + ' 门';
            }
            },
            // 默认情况下watch初始化时不执行
            // watch: {
            //     courses(newValue, oldValue) {
            //         this.totalCount = newValue.length + ' 门'
            //     }
            // },
            // 你如果想立马看到效果的话，就得用下面这个监听器！
            watch: {
            courses: {
            immediate: true,
            // deep: true,
            handler(newValue, oldValue) {
            this.totalCount = newValue.length + ' 门'
            }
            }
            },
            })
</script>
</body>
</html>
